﻿@model ProductAttributeOptionsSetModel

@{
    var parentModel = ViewData["Parent"] as ProductAttributeModel;

    const string strRoot = "Admin.Catalog.Products.ProductVariantAttributes.Attributes.Values.Fields.";
    var nameStr = T(strRoot + "Name");
    var aliasStr = T(strRoot + "Alias");
    var linkedProductStr = T(strRoot + "LinkedProduct");
    var priceAdjustmentStr = T(strRoot + "PriceAdjustment");
    var weightAdjustmentStr = T(strRoot + "WeightAdjustment");
    var isPreSelectedStr = T(strRoot + "IsPreSelected");
    var displayOrderStr = T("Common.DisplayOrder");
}

<datagrid id="product-attribute-optionsset-grid" class="h-100"
          allow-edit="true"
          allow-resize="true"
          allow-column-reordering="true"
          preserve-grid-state="true" preserve-command-state="true">
    <datasource read="@Url.Action("ProductAttributeOptionsSetList", new { productAttributeId = parentModel.Id })"
                insert="@Url.Action("ProductAttributeOptionsSetInsert", new { productAttributeId = parentModel.Id })"
                update="@Url.Action("ProductAttributeOptionsSetUpdate")"
                delete="@Url.Action("ProductAttributeOptionsSetDelete")" />
    <paging position="Bottom" show-size-chooser="true" />
    <sorting allow-unsort="true" allow-multisort="false">
        <sort by="Name" />
    </sorting>
    <toolbar>
        <toolbar-group>
            <button datagrid-action="DataGridToolAction.InsertRow" type="button" class="btn btn-primary btn-flat no-anims mr-auto">
                <i class="fa fa-plus"></i>
                <span>@T("Admin.Common.AddNew")</span>
            </button>
            <button datagrid-action="DataGridToolAction.SaveChanges" type="button" class="btn btn-warning no-anims btn-flat">
                <i class="fa fa-check"></i>
                <span>@T("Admin.Common.SaveChanges")</span>
            </button>
            <button datagrid-action="DataGridToolAction.CancelEdit" type="button" class="btn btn-light btn-flat mr-auto">
                <span>@T("Common.Cancel")</span>
            </button>
        </toolbar-group>
    </toolbar>
    <row-commands>
        <a datarow-action="DataRowAction.InlineEdit">@T("Common.Edit")</a>
        <a datarow-action="DataRowAction.Delete">@T("Common.Delete")</a>
    </row-commands>
    <columns>
        <column for="Id" halign="center" visible="false" readonly="true" type="string" />
        <column for="Name" hideable="false" width="2fr" />
    </columns>
    <detail-view>
        <div class="datagrid-root">
            <sm-datagrid
                :ref="'product-attribute-options-grid' + item.row.Id"
                :id="'product-attribute-options-grid' + item.row.Id"
                :options="{ keyMemberName: 'Id', vborders: true, hover: true, striped: true, allowRowSelection: true }" 
                :data-source="{ read: '@Url.Action("ProductAttributeOptionList")?optionsSetId=' + item.row.Id, del: '@Url.Action("ProductAttributeOptionDelete")' }"
                :columns="[ 
                    { member: 'ProductAttributeOptionsSetId', name: 'ProductAttributeOptionsSetId', visible: false },
                    { member: 'Name', name: '@nameStr', visible: true, title: '@nameStr' },
                    { member: 'Alias', name: '@aliasStr', visible: true, title: '@aliasStr' },
                    { member: 'LinkedProductName', name: '@linkedProductStr', visible: true, title: '@linkedProductStr', entityMember: 'LinkedProductId' },
                    { member: 'PriceAdjustmentString', name: '@priceAdjustmentStr', visible: true, halign: 'center', title: '@priceAdjustmentStr', entityMember: 'PriceAdjustment' },
                    { member: 'WeightAdjustmentString', name: '@weightAdjustmentStr', visible: true, halign: 'center', title: '@weightAdjustmentStr', entityMember: 'WeightAdjustment' },
                    { member: 'IsPreSelected', name: 'IsPreSelected', visible: true, halign: 'center', type: 'boolean', title: '@isPreSelectedStr' },
                    { member: 'DisplayOrder', name: 'DisplayOrder', visible: true, halign: 'center', type: 'int', title: '@displayOrderStr' },
                ]" 
                :paging="{ enabled: false }" 
                :sorting="{ enabled: false }">
                <template v-slot:display-name="item">
                    <i :class='item.row.TypeNameClass' :title='item.row.TypeName'></i>
                    <span class="color-container" v-if="item.row.HasColor"><span class='color' :style='{ background: item.row.Color }' :title='item.row.Color'>&nbsp;</span></span>
                    <a href="#" class="text-truncate edit-attribute-option" :data-key="item.row.Id" :data-setid="item.row.ProductAttributeOptionsSetId">{{ item.value }} {{ item.row.QuantityInfo }}</a>
                </template>
                <template v-slot:display-linkedproductname="item">
	                <span class='mr-1 badge' :class="'badge-' + item.row.LinkedProductTypeLabelHint">{{ item.row.LinkedProductTypeName }}</span>
                    <a class="text-truncate" v-bind:href="item.row.LinkedProductEditUrl">{{ item.value }}</a>
                </template>
                <template v-slot:rowcommands="item">
                    <div class="dg-commands-dropdown dropdown-menu dropdown-menu-right">
                        <a href="#" class="dropdown-item edit-attribute-option" :data-key="item.row.Id" :data-setid="item.row.ProductAttributeOptionsSetId">@T("Common.Edit")</a>
                        <a href="#" class="dropdown-item" v-on:click.prevent="item.deleteRows(item.row)">@T("Common.Delete")</a>
                    </div>
                </template>
                <template v-slot:toolbar="grid">
                    <div class="dg-toolbar btn-toolbar d-flex flex-nowrap">
                        <div class="dg-toolbar-group">
                            <button type="button" class="btn btn-primary btn-sm btn-flat no-anims mr-auto insert-attribute-option" 
                                :data-setid="item.row.Id" v-if="!grid.editing.active" v-on:click.prevent="grid.insertRow">
                                <i class="fa fa-plus"></i>
                                <span>@T("Admin.Common.AddNew")</span>
                            </button>
                        </div>
                        <div class="dg-toolbar-group omega">
                            <button type="button" class="btn btn-danger btn-sm btn-flat no-anims" href="#" v-bind:class="{ &#x27;disabled&#x27;: !grid.hasSelection }" v-on:click.prevent="grid.deleteSelectedRows">
                                <i class="far fa-trash-can"></i>
                                <span>@T("Admin.Common.Delete.Selected")</span>
                            <span v-if='grid.hasSelection' class='badge badge-success'>{{ grid.selectedRowsCount }}</span></button>
                        </div>
                    </div>
                </template>
            </sm-datagrid>
        </div>
    </detail-view>
</datagrid>

<input type="button" id="btnRefreshOptions" name="btnRefreshOptions" value="" class="d-none" />

<script sm-target-zone="scripts" data-origin="product-attribute-optionsset-edit">
    $(function() {
        $(document).on('click', '.insert-attribute-option', function (e) {
            e.preventDefault();
            var optionsSetId = $(this).data('setid');
            var url = '@Url.Action("ProductAttributeOptionCreatePopup")';
            url += `?productAttributeOptionsSetId=${optionsSetId}&btnId=btnRefreshOptions&formId=product-attribute-options-grid${optionsSetId}`;

            $('#btnRefreshOptions').val(optionsSetId);
            openPopup(url, true);
        });

        $(document).on('click', '.edit-attribute-option', function (e) {
            e.preventDefault();
            var btn = $(this);
            var optionsSetId = btn.data('setid');
            var id = btn.data('key');
            var url = '@Url.Action("ProductAttributeOptionEditPopup").EnsureEndsWith('/')';
            url += `${id}?btnId=btnRefreshOptions&formId=product-attribute-options-grid${optionsSetId}`;

            $('#btnRefreshOptions').val(optionsSetId);
            openPopup(url, true);
        });

        // Refresh options grid after popup dialog was closed.
        $(document).on('click', '#btnRefreshOptions', function () {
            var childGridId = 'product-attribute-options-grid' + $(this).val();
            var childGrid = window['product-attribute-optionsset-grid'].$refs[childGridId];
            childGrid.read();

            return false;
        });
    });
</script>
